<template>
  <el-form
    class="withdraw-form"
    :model="withdrawForm"
    :rules="withdrawFormRules"
    ref="withdrawFormDom"
    v-loading="loading"
  >
    <!-- 公司名称 -->
    <el-form-item class="input-item">
      <div class="date-key">公司名稱：</div>
      <div class="date-value">{{ withdrawForm.company_name }}</div>
    </el-form-item>
    <!-- 提现银行名称 -->
    <el-form-item class="input-item">
      <div class="date-key">提現銀行名稱：</div>
      <div class="date-value">{{ withdrawForm.bank_name }}</div>
    </el-form-item>
    <!-- 提现账户名称 -->
    <el-form-item class="input-item">
      <div class="date-key">提現賬戶名稱：</div>
      <div class="date-value">{{ withdrawForm.account_name }}</div>
    </el-form-item>
    <!-- 提现银行账户号 -->
    <el-form-item class="input-item">
      <div class="date-key">提現銀行帳戶號：</div>
      <div class="date-value">{{ withdrawForm.account }}</div>
    </el-form-item>
    <!-- 提现貨幣 -->
    <el-form-item class="input-item">
      <div class="date-key">提現貨幣：</div>
      <div class="date-value">{{ withdrawForm.currency }}</div>
    </el-form-item>
    <!-- 提现金额 可用余额-->
    <el-form-item class="input-item" prop="order_amount">
      <div class="date-key widthFix">提現金額:</div>
      <el-input
        v-model="withdrawForm.order_amount"
        size="large"
        placeholder="請輸入"
      />
      <!-- <div class="extra-info">可用餘額: {{ withdrawForm.canuseMoney }}</div> -->
    </el-form-item>
    <!-- 谷歌验证器 -->
    <el-form-item class="input-item" prop="code">
      <div class="date-key widthFix">谷歌驗證器:</div>
      <el-input v-model="withdrawForm.code" size="large" placeholder="請輸入" />
    </el-form-item>
    <!-- 提交按鈕 -->
    <el-form-item class="submit-btn-item" @click="onClickSubmit">
      <el-button type="primary">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reqShowWithdrawal, reqCreateWithdrawal } from "@/api/index";
import { useUserStore } from "@/store/index";
import { ref } from "vue";
import { ElMessage } from "element-plus";

// const { withdrawForm,withdrawFormRules,submitWithDrawForm } = useWithdraw();
const withdrawFormDom = ref(null);
const loading = ref(false);
const userStore = useUserStore();
const withdrawForm = ref({
  company_name: "",
  bank_name: "",
  account_name: "",
  account: "",
  currency: "",
  order_amount: "",
  code: "",
});
const withdrawFormRules = ref({
  order_amount: [
    { required: true, message: "请输入提现金额", trigger: "blur" },
  ],
  code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
});
const resetForm = () => {
  withdrawForm.value.order_amount = "";
  withdrawForm.value.code = "";
};

const onClickSubmit = () => {
  withdrawFormDom.value.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      try {
        clog("提现参数:", {
          user_id: userStore.user_id,
          order_amount: withdrawForm.value.order_amount,
          code: withdrawForm.value.code,
          currency: withdrawForm.value.currency
        });
        const res = await reqCreateWithdrawal({
          user_id: userStore.user_id,
          order_amount: withdrawForm.value.order_amount,
          code: withdrawForm.value.code,
          currency: withdrawForm.value.currency
        });
        clog("提现信息：", res);
        ElMessage.success("提现成功！");
        resetForm();
        loading.value = false;
      } catch (err) {
        loading.value = false;
      }
    }
  });
};

const initData = async () => {
  loading.value = true;
  try {
    clog("提现信息展示参数:", userStore.user_id);
    const res = await reqShowWithdrawal(userStore.user_id);
    clog("提现信息展示：", res);
    withdrawForm.value.company_name = res.data[0].company_name;
    withdrawForm.value.bank_name = res.data[0].bank_name;
    withdrawForm.value.account_name = res.data[0].account_name;
    withdrawForm.value.account = res.data[0].account;
    withdrawForm.value.currency = res.data[0].currency;
    loading.value = false;
    clog("表单:", withdrawForm.value);
  } catch (err) {
    loading.value = false;
    clog("提现信息展示失败：", err);
  }
};
initData();
</script>

<style scoped lang="scss">
.date-key {
  color: #3d3d3d;
}

.date-value {
  color: #3d3d3d;
}

.widthFix {
  width: 90px;
  margin-right: 13px;
}

.extra-info {
  margin-left: 20px;
}

.withdraw-form {
  width: 510px;
  margin: 0 auto;

  :deep(.submit-btn-item) {
    .el-button.el-button--primary {
      width: 140px;
      height: 34px;
    }
  }

  :deep(.input-item) {
    .el-form-item__content {
      flex-wrap: nowrap;
      flex-shrink: 0;

      .el-input--large {
        width: 213px;

        .el-input__wrapper {
          background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
          height: 34px;
        }
      }
    }
  }
}
</style>
